<template>
  <div class="giveLike">
    <div class="accept">
      <div class="list">
        <div class="accept_text">认可理由</div>
        <van-cell-group>
          <van-field v-model="message" type="textarea" placeholder="请输入留言" rows="4"/>
        </van-cell-group>
      </div>
      <div class="type">
        <span class="type_vie">认可类型</span>
        <span class="type_sec" @click="isShow">{{typeName}}</span>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" :overlay="false">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
    </van-popup>
    <div class="dianzhan" @click="LikeOne()">
      <span class="iconfont icon-mn_dianzhan_fill"></span>
    </div>
  </div>
</template>
<script>
import { listApprovetype, likeOne } from "@/api/admin";

export default {
  name: "component_name",
  data() {
    return {
      show: false,
      message: "",
      typeName: "请选择点赞类型    ",
      typeList: {},
      columns: [],
      approvetype_id: "" //认可类型ID
    };
  },
  methods: {
    isShow() {
      this.show = true;
    },
    onConfirm(value, index) {
      this.show = false;
      this.typeName = value.text;
      this.approvetype_id = value.id;
    },
    onCancel() {
      this.show = false;
    },
    async type() {
      let { data } = await listApprovetype();
      this.columns = data.data.rows.map(item => {
        return { id: item.id, text: item.approvetype_name };
      });
    },
    async LikeOne() {
      try {
        if (this.message == "") {
          this.$toast.fail("请输入认可理由");
          return;
        }
        if (this.approvetype_id == "") {
          this.$toast.fail("请选择认可类型");
          return;
        }
        let par = {
          like_userid: this.$route.query.id,
          approvetype_id: this.approvetype_id,
          like_reason: this.message
        };
        let { data } = await likeOne(par);
        if (data.status == 100) {
          this.$toast.success("点赞成功");
        //   this.$router.replace("/Address");
             this.$router.go(-1)
        }
      } catch (error) {
        if (error.data.status == 101) {
          this.$toast.fail(error.data.msg);
        }
      }
    }
  },
  created: function() {
    this.type();
  }
};
</script>
<style lang="scss" scoped>
.accept {
  background: #fff;
  padding: 10px 0;
  .accept_text {
    font-size: 18px;
    padding-left: 15px;
  }
  .type {
    padding: 10px 0;
    margin-left: 15px;
    .type_vie {
      font-size: 18px;
    }
    .type_sec {
      font-size: 16px;
      color: #a0a0a0;
    }
  }
}
.dianzhan {
  position: fixed;
  bottom: 5%;
  right: 40%;
  width: 60px;
  height: 60px;
  background: #ff894b;
  text-align: center;
  border-radius: 50%;
}
.icon-mn_dianzhan_fill {
  font-size: 30px;
  color: #fff;

  line-height: 60px;
}
</style>
